<template>
  <div class="app-container">
    <div class="header">
      <div>当日飞行任务实时监控</div>
      <div style="font-size: 14px;">{{ Time }}</div>
    </div>
    <el-row>
      <el-col v-for="(item, index) in 9" :span="8" class="item">
        <div class="grid-content bg-purple" @click="toDetail">
          <div class="title">
            <img class="icon" src="@/assets/images/air.png" alt="">城市巡检任务{{ item }}
          </div>
          <img class="img" src="@/assets/images/bg.jpg" alt="">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'Monitoring',
  data() {
    return {
      Time: ''
    }
  },
  created() {
    this.Time = this.getTime();
    setInterval(() => {
      this.Time = this.getTime();
    }, 1000)
  },
  methods: {
    toDetail() {
      this.$router.push({ path: '/monitoring/detail' })
    },
    getTime() {
      var stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
      var Time = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
      return Time;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 17px;
    background: rgba(48, 65, 86, 0.8);
    padding: 8px 15px;
    border-radius: 4px;
    color: #fff;
  }

  .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 6px;

    .icon {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
  }

  .img {
    width: calc(100% - 100px);
    height: auto;
    margin-bottom: 20px;
    cursor: pointer;
  }

  .item {
    &:nth-child(2n) {
      // margin: 0 100px;
    }
  }
}
</style>
